<template id="tmp-account-list">
    <div>
        <div class="mt-3 text-right">

            <el-form :inline="true" size="mini" class="demo-form-inline">
                <el-form-item label="账号">
                    <el-input v-model="search.name" placeholder="账号" :clearable="true" maxlength="20"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSearch">查询</el-button>
                </el-form-item>

                <el-form-item>
                    <el-button type="danger" @click="handleClear" plain>清库</el-button>
                </el-form-item>

            </el-form>


        </div>
        <el-table
            :data="list"
            style="width: 100%">
            <el-table-column
                prop="id"
                width="50"
                label="id">
            </el-table-column>
            <el-table-column
                prop="username"
                width="150"
                label="账号">
            </el-table-column>

            <el-table-column
                width="100"
                label="积分">
                <template slot-scope="scope" v-if="scope.row.player">
                    @{{ parseFloat(scope.row.player.money).toFixed(2) }}
                </template>
            </el-table-column>



            <el-table-column
                label="online"
                width="150">
                <template slot-scope="scope">
                    <i v-if="scope.row.online===1" class="el-icon-success"></i>
                    <span v-else>
                        @{{scope.row.last_login>0?getLocalTime(scope.row.last_login):''}}
                    </span>
                </template>
            </el-table-column>

            <el-table-column
                prop="gm"
                width="100"
                label="GM">
                <template slot-scope="scope">
                    @{{ scope.row.gm===1?'是GM':'' }}
                </template>
            </el-table-column>

            <el-table-column
                prop="money_agent"
                width="100"
                label="推广比例">
                <template slot-scope="scope" v-if="scope.row.player">
                    @{{ scope.row.player.recommend_ratio }} %
                </template>
            </el-table-column>

            <el-table-column
                width="100"
                label="合作推广">
                <template slot-scope="scope" v-if="scope.row.player">
                    <el-switch
                        v-model="scope.row.player.is_agent"
                        active-color="#13ce66"
                        :active-value="1"
                        :inactive-value="0"
                        @change="isAgentChange(scope.row.player)">
                    </el-switch>
                </template>
            </el-table-column>

            <el-table-column
                prop="money_agent"
                width="100"
                label="推广账户">
                <template slot-scope="scope" v-if="scope.row.player">
                    @{{ scope.row.player.money_agent }}
                </template>
            </el-table-column>

{{--            <el-table-column
                prop="ban" width="50"
                label="封禁">
                <template slot-scope="scope">
                    <div v-if="scope.row.ban===1">
                        <i class="el-icon-error"></i>
                    </div>
                </template>
            </el-table-column>--}}

            <el-table-column>
                <template slot-scope="scope">
                    <el-dropdown trigger="click" @command="handleCommand" v-if="scope.row.username!=='ADMIN'" >
                        <el-button size="mini" type="primary">
                            操作<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item v-if="scope.row.gm===1" :command="{act:'unSetGM',item:scope.row}">取消GM</el-dropdown-item>
                            <el-dropdown-item v-if="scope.row.gm===0" :command="{act:'setGM',item:scope.row}" >设为GM</el-dropdown-item>
                            <el-dropdown-item :command="{act:'changeRecommendRatio',item:scope.row}" v-if="scope.row.player">设置推广奖励比例</el-dropdown-item>
                            <el-dropdown-item :command="{act:'addScore',item:scope.row}" v-if="scope.row.player">调整积分</el-dropdown-item>
                            <el-dropdown-item :command="{act:'changeAgentMoney',item:scope.row}" v-if="scope.row.player && scope.row.player.is_agent">调整推广账户</el-dropdown-item>
                            <el-dropdown-item :command="{act:'resetPwd',item:scope.row}" >重置密码为：123456</el-dropdown-item>
{{--                            <el-dropdown-item icon="el-icon-close" :command="{act:'ban',item:scope.row}" :disabled="scope.row.ban===1">封禁账号</el-dropdown-item>--}}
{{--                            <el-dropdown-item icon="el-icon-check" :command="{act:'unban',item:scope.row}" :disabled="scope.row.ban===0">解除封禁</el-dropdown-item>--}}
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>

        </el-table>

        <div class="text-center mt-3" v-if="list">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="search.page"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="search.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="search.total">
            </el-pagination>
        </div>

        <el-dialog
            v-if="curItem"
            :title="actName+'：'+curItem.username"
            :show-close="false"
            :visible.sync="showDialog"
            width="30%">

            <div if="showAct==='ban'">
                @{{curItem}}
                <el-input-number size="mini" v-model="editData.banDay" :min="0" :max="30"></el-input-number>
                天
                <el-input-number size="mini" v-model="editData.banHour" :min="0" :max="23"></el-input-number>
                小时
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button @click="showDialog = false">取 消</el-button>
                <el-button type="primary" @click="doAct">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>
<script>
    Vue.component("component-account-list", {
        data() {
            return {
                list:[],
                curItem:null,
                showDialog:false,
                showDialogPwd:false,
                showAct:'',
                editPwd:'',
                editData:{
                    money:0,
                    itemId:0,
                    itemCount:1,
                    level:1,
                    muteMin:10,
                    banDay:1,
                    banHour:0,
                },

                // showMoney:false,
                // showItem:false,
                // showLevel:false,
                // showMute:false,
                // showBan:false,
                search: {
                    account:'',
                    name:'',
                    class:'',
                    race:'',
                    size: 10,
                    page:1,
                    total: 1,
                }
            };
        },
        template:"#tmp-account-list",
        mounted() {
            this.getList();
        },
        computed:{
            actName(){
                switch (this.showAct) {
                    case 'ban':
                        return '封禁账号';
                    case 'unban':
                        return '解除账号封禁';
                    default:
                        return '';
                }
            }
        },
        filters:{
        },
        methods: {
            doAct(){
                let data={};
                switch (this.showAct) {
                    case 'resetPwd':
                    case 'unSetGM':
                    case 'setGM':
                    case 'unban':
                        this.accountDoAct();
                        break;
                    case 'ban':
                        if (this.editData.banDay+this.editData.banHour===0){
                            this.$message.error('无效的时间');
                            return;
                        }
                        data=this.editData;
                        this.accountDoAct(data);
                        break;
                    case 'addScore':
                        this.$prompt('请输入调整积分数量：正数加积分，负数减积分', '调整积分', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            inputPattern: /^-?[1-9]{1}\d{0,5}$/,
                            inputErrorMessage: '格式不正确'
                        }).then(({ value }) => {
                            data={value:value};
                            this.accountDoAct(data);
                        }).catch(() => {});
                        break;
                    case 'changeAgentMoney':
                        this.$prompt('请输入调整推广账户额度：正数加，负数减', '调整推广账户', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            inputPattern: /^-?[1-9]{1}\d{0,5}$/,
                            inputErrorMessage: '格式不正确'
                        }).then(({ value }) => {
                            data={value:value};
                            this.accountDoAct(data);
                        }).catch(() => {});
                        break;
                    case 'changeRecommendRatio':
                        this.$prompt('请输入推广奖励比例：1-100', '设置推广奖励比例', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            inputPattern: /^([1-9][0-9]{0,1}|100)$/,
                            inputErrorMessage: '格式不正确'
                        }).then(({ value }) => {
                            data={value:value};
                            this.accountDoAct(data);
                        }).catch(() => {});
                        break;
                    default:
                        return;
                }
            },
            isAgentChange(p){
                post('isAgentChange', {
                    id:p.id,
                    is_agent:p.is_agent},res=>{
                    console.log(res);
                },this)
            },
            accountDoAct(data={}){
                post('accountDoAct', {
                    act:this.showAct,
                    data:data,
                    name:this.curItem.username},res=>{
                    if(res.err===0){
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                    }else{
                        this.$message.error(res.data);
                        return;
                    }

                    if(this.showAct==='ban'){
                        this.curItem.ban=1;
                    }else if(this.showAct==='unban'){
                        this.curItem.ban=0;
                    }else if(this.showAct==='setGM'){
                        this.curItem.gm=1;
                    }else if(this.showAct==='unSetGM'){
                        this.curItem.gm=0;
                    }else{
                        this.curItem.player=res.data
                    }

                    this.showDialog=false;
                    console.log(res);
                },this)
            },
            handleCommand(command) {
                this.showAct=command.act;
                this.curItem=command.item;
                this.editData.level=command.item.level;
                if (command.act==='ban'){
                    this.showDialog=true;
                }else{
                    this.doAct();
                }
                console.log(command);
                // this.$message('click on item ' + command);
            },
            getList(){
                post('accountList', this.search,res=>{
                    console.log(res);
                    this.list=res.data.data;
                    this.search.total=res.data.total;
                },this)
            },
            handleClear(){
                this.$confirm('此操作将永久删除admin之外的所有账号，是否继续?（如果数据量较大，请耐心等待）', '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    post('clearDatabase', {},res=>{
                        console.log(res);
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getList()
                    },this)
                }).catch(() => {
                });
            },
            handleSearch(){
                this.search.page=1;
                this.getList();
            },
            handleSizeChange(size){
                this.search.size=size;
                this.getList();
            },
            handleCurrentChange(page){
                this.search.page=page;
                this.getList();
            }
        }
    });
</script>

